import React, { useState } from 'react';
import {
  NavBar,
  Space,
  Toast,
  Dropdown,
  InfiniteScroll,
  List,
  DotLoading,
  Tabs,
} from 'antd-mobile';
import {
  SearchOutline,
  MoreOutline,
  CloseOutline,
  MinusOutline,
  LocationOutline,
  AndroidOutlined,
  AppleOutlined,
} from 'antd-mobile-icons';
import './index.less';
import { mockRequest } from './mock-request';
import { history } from 'umi';
import Quanguo from './quanguo';
import Wedding from './wedding';

import { DropdownMenu } from 'react-vant';

const items = [
  // {
  //   key: '1',
  //   label: `Tab 1`,
  //   children: `Content of Tab Pane 1`,

  // },
  // {
  //   key: '2',
  //   label: `Tab 2`,
  //   children: <Quanguo></Quanguo>,
  // },
  // {
  //   key: '3',
  //   label: `Tab 3`,
  //   children: `Content of Tab Pane 3`,
  // },

  {
    key: '1',
    pic: '/婚纱摄影.jpg',
    name: '婚纱摄影',
    children: <Wedding></Wedding>,
  },
  {
    key: '2',
    pic: '/全国旅拍.jpg',
    name: '全国旅拍',
    children: <Quanguo />,
  },
  {
    id: '3',
    pic: '/婚礼策划.jpg',
    name: '婚礼策划',
  },
  {
    id: '4',
    pic: '/婚宴酒店.jpg',
    name: '婚宴酒店',
  },
  {
    id: '5',
    pic: '/婚纱礼服.jpg',
    name: '婚纱礼服',
  },
  {
    id: '6',
    pic: '/婚礼跟妆.jpg',
    name: '婚礼跟妆',
  },
  {
    id: '7',
    pic: '/司仪主持.jpg',
    name: '司仪主持',
  },
];
export default () => {
  const [state, setState] = useState([
    {
      id: '1',
      pic: '/婚纱摄影.jpg',
      name: '婚纱摄影',
    },
    {
      id: '2',
      pic: '/全国旅拍.jpg',
      name: '全国旅拍',
    },
    {
      id: '3',
      pic: '/婚礼策划.jpg',
      name: '婚礼策划',
    },
    {
      id: '4',
      pic: '/婚宴酒店.jpg',
      name: '婚宴酒店',
    },
    {
      id: '5',
      pic: '/婚纱礼服.jpg',
      name: '婚纱礼服',
    },
    {
      id: '6',
      pic: '/婚礼跟妆.jpg',
      name: '婚礼跟妆',
    },
    {
      id: '7',
      pic: '/司仪主持.jpg',
      name: '司仪主持',
    },
  ]);

  const [data, setData] = useState([
    {
      id: '1',
      pic: '/保定华纳婚纱摄影.jpg',
      name: '保定华纳婚纱摄影',
    },
    {
      id: '2',
      pic: '/莫林影像.jpg',
      name: '莫林影像',
    },
    {
      id: '3',
      pic: '/保定华纳婚纱摄影.jpg',
      name: '保定华纳婚纱摄影',
    },
    {
      id: '4',
      pic: '/莫林影像.jpg',
      name: '莫林影像',
    },
  ]);
  const [hasMore, setHasMore] = useState(true);
  const [childId, setChildId] = useState(1);
  async function loadMore() {
    const append = await mockRequest();
    // console.log(append);
    setData((val) => [...val, ...append]);
    setHasMore(append.length > 0);
  }

  const changePage = (key) => {
    setChildId(key);
  };

  const InfiniteScrollContent = ({ hasMore }) => {
    return (
      <>
        {hasMore ? (
          <>
            <span>Loading</span>
            <DotLoading />
          </>
        ) : (
          <span>--- 我是有底线的 ---</span>
        )}
      </>
    );
  };
  return (
    <>
      <div className="father">
        <div className="body">
          <div className="header">
            <span>
              <SearchOutline
                className="search"
                onClick={() => {
                  history.push('/search');
                }}
              />
            </span>
            <span style={{ fontSize: '0.3rem', textAlign: 'center' }}>
              婚礼纪
            </span>
            <span></span>
          </div>

          <div className="daohang">
            <Tabs
              defaultActiveKey="1"
              onChange={(key) => {
                changePage(key);
              }}
            >
              {}
              <Tabs.Tab
                title={
                  <>
                    <img src={require('@/imgs/婚纱摄影.png')} alt="" />
                    婚纱摄影
                  </>
                }
                key="1"
              />
              <Tabs.Tab
                title={
                  <>
                    <img src={require('@/imgs/全国旅拍.png')} alt="" />
                    全国旅拍
                  </>
                }
                key="2"
              />
              <Tabs.Tab
                title={
                  <>
                    <img src={require('@/imgs/婚庆策划.png')} alt="" />
                    婚礼策划
                  </>
                }
                key="3"
              />
              <Tabs.Tab
                title={
                  <>
                    <img src={require('@/imgs/婚宴酒店.png')} alt="" />
                    婚宴酒店
                  </>
                }
                key="4"
              />
              <Tabs.Tab
                title={
                  <>
                    <img src={require('@/imgs/婚纱礼服.png')} alt="" />
                    婚纱礼服
                  </>
                }
                key="5"
              />
              <Tabs.Tab
                title={
                  <>
                    <img src={require('@/imgs/婚礼跟妆.png')} alt="" />
                    婚礼跟妆
                  </>
                }
                key="6"
              />
              <Tabs.Tab
                title={
                  <>
                    <img src={require('@/imgs/司仪主持.png')} alt="" />
                    司仪主持
                  </>
                }
                key="7"
              />
            </Tabs>
          </div>
        </div>

        <div className="content">
          <div style={{ display: childId == 1 ? 'block' : 'none' }}>
            <Wedding />
          </div>
          <div style={{ display: childId == 2 ? 'block' : 'none' }}>
            <Quanguo />
          </div>
        </div>
      </div>
    </>
  );
};
